<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>公众号支付页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
     <!-- <script language="javascript" src="http://res.mail.qq.com/mmr/static/lib/js/jquery.js" type="text/javascript"></script>
    <script language="javascript" src="http://res.mail.qq.com/mmr/static/lib/js/lazyloadv3.js" type="text/javascript"></script>
      --><link
    href="http://cdn.staticfile.org/jquery-mobile/1.4.5/jquery.mobile-1.4.5.min.css?version=20151214"
    rel="stylesheet" type="text/css" />
<script
    src="http://cdn.staticfile.org/jquery/1.7.1/jquery.min.js?version=20151214"
    type="text/javascript"></script>
<script
    src="http://cdn.staticfile.org/jquery-mobile/1.4.5/jquery.mobile-1.4.5.min.js?version=20151214"
    type="text/javascript"></script>
<script
    src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?version=20151214"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    
    <style type="text/css">
        body
        {
            margin:0px;
            font-family: 微软雅黑;  
            background-color: #eeeeee;
        }
        .mainContent
        {
            width:100%; 
            background-color:#ffffff;
            position:relative;
            
            
        }
        .title
        {
            background-color: #f4f4f4;
            font-size: 1.5em;
            height: 60px;
             line-height:60px;
           
            text-align: center;
            float:left;
            width: 70%;
            
        }
        .productContent
        {
            margin: 10px;
            width: 95%;
            height: 150px;
            
        }
        .productIcon
        {
            float:left;
        }
        
        .productDetail 
        {
            
           
            padding-left: 20px;
          
           width:100%;
           padding-right:20px;
        }
        .line
        {
            border-top: 1px solid #999999;
            height: 1px;
            margin : 10px 20px;
            text-align: center;
        }
        h2
        {
            font-size: 25px;
            line-height: 25px;
            margin-bottom: 20px;
            margin-top: 12px;   
        }
        #btnDiv
        {
             background-color: #66ac14;
            border-radius: 2px;
            color: White;
            font-size: 1.2em;
            height: 40px;
            line-height: 40px;
            margin: 20px auto 20px;
            text-align: center;
            width: 50%;
        }
        #btnDiv:active
        {
             background-color: #66c014;
        }
        .footer
        {
            color: #929292;
            font-size: 0.8em;

            margin-top: 10%;
            text-align: center;
        }
        .ordertitle
        {
            color:#622c85;
            font-size:2em;
            margin :15px auto 15px 30px;
        }
        
        .pro_img
        {
            float: left;
            width: 18%;
        }
        .img_pro
        {
            
        }
        .pro_content
        {
             float: right;
            margin-left: 5px;
            margin-right: 10px;
            width: 75%;
           
        }
        .pro_title
        {
             font-size:1.1em;
        }
        .pro_info
        {
            font-size:0.7em;
            color:#929292;
        }
        .pro_price
        {
            
            float: right;
            margin-right: 35px;
        }
        .span_sum
        {
            margin-left: 10px;
        }
        .span_sum_money
        {
            float: right;
            margin-right: 10px;
        }
         .span_discount
        {
            color:#f26922;
            margin-left: 10px;
        }
        .span_dis_money
        {
            color:#f26922;
            float: right;
            margin-right: 10px;
        }
        .split_div
        {
            clear:both;
           margin-left:10px;
            margin-right:10px;
          
           width:100%;
          
        }
         .span_pay
        {
            margin-left: 30px;
            font-weight:bold;
        }
        .span_pay_money
        {
            float: right;
            margin-right: 35px;
            font-weight:bold;
        }
        .return_div
        {
             float:left;
            width:15%;
            height:60px;
             background-color: #f4f4f4;
        }
        .div_title
        {
             width:100%;
             height:50px;
        }
        .empty
        {
            height: 50px;
        }
    </style>
</head>
<body>
 <form id="form1" runat="server">
    
     <div class="mainContent">
          <div class="div_title"><div class="return_div" id="div_return"><img src="images/arrow.png" height="30px" style=" margin-top:15px;margin-left:10px;" /></div><div class="title"> 确认订单</div><div class="return_div" >&nbsp;</div></div>
          <div class="ordertitle">爱情测评</div> 
          <div class="split_div"></div>
          <div class="line"></div>
          
            <div class="productDetail">
               <div class="pro_img">
               <img  src="images/buyRetestLove.png" width="100%" />
               </div>
               <div class="pro_content">
               <div class="pro_title">
               重测爱情
               </div>
               <div class="pro_info">
               <p>-回到初始状态，包含测评记录，匹配记录，</p>
               <p>以及小纸条记录。</p>
               <p>-确定“重测爱情”之后，可以重新答题。</p>
               </div>
               <div class="pro_price">
               <!-- ￥10.00 -->
                ￥${money}.00 
               </div>
               </div>
               
            </div>
            <div class="split_div"></div>
            <div class="line"></div>
            
          
          <%--  <%if (totalAmount > 68)
          {%>
            <div><span class="span_sum">小计</span><span class="span_sum_money">￥<%=totalAmount.ToString()%>.00</span></div>
            <%} %>
            <%if (discount > 0)
              {%>
            <div><span class="span_discount">节省了</span><span class="span_dis_money">-￥<%= discount.ToString()%>.00</span></div>
            <%} %> --%>
            <div><span class="span_pay">实付款</span><span class="span_pay_money">￥${money}.00</span></div>
            <%-- <div><span class="span_pay">实付款</span><span class="span_pay_money">￥${money}.00</span></div> --%>
            <div class="empty"></div>
            <div id="btnDiv">
                微信支付
            </div>
     <div class="empty"></div>
        </div>
 
<%--    <div class="WCPay">
    <h1 class="title"  id="getBrandWCPayRequest" onclick="SavePay()" >提交</h1>
    
<a id="getBrandWCPayRequest" href="javascript:void(0);">
            <h1 class="title" onclick="">点击提交可体验微信支付</h1>
        </a>
    </div>--%>
        </form>
</body>
</html>


<script type="text/javascript">

    $(function() {
        $("#btnDiv").click(function() {
            SavePay();
        });
        $("#div_return").click(function() {
            location.replace("../../Report/MoblieReport/Template/Mod_ProfessionReport.aspx");
        });
    });

    function SavePay() {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": "${appid }", //公众号名称，由商户传入
            "timeStamp": "${TimeStamp }", //时间戳
            "nonceStr": "${NonceStr }", //随机串
            "package": "${Package }", //扩展包
            "signType": "MD5", //微信签名方式:1.sha1
            "paySign": "${PaySign }" //微信签名
        },
               function(res) {
                   if (res.err_msg == "get_brand_wcpay_request:ok") {

                       $.ajaxSimple({ mn: "Save", pn: "", pv: "",
                           sending: function(XMLHttpRequest, option) {
                               return;
                           },
                           sFun: function(result, option) {
                               location.replace(result);
                               return;
                           }
                       });
                   } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                       
                   } else {
                       
                   }
                   // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                   //因此微信团队建议，当收到ok返回时，向商户后台询问是否收到交易成功的通知，若收到通知，前端展示交易成功的界面；若此时未收到通知，商户后台主动调用查询订单接口，查询订单的当前状态，并反馈给前端展示相应的界面。
               });
    }
</script>